<template>
   <!--
    动态对class 和Style进行绑定
    class绑定语法：
        :class="{类名:true/false}"
    style绑定语法：
        :style="{样式名：值}"
   -->
   <span>我的第一个class样式</span>
   <p :class="{ str_red: bool,back_bg:bool }">动态对class的文本颜色修改</p>
   <!--当我们使用对象类型的时候 需要去掉{}-->
   <p :class="classObj">class绑定对象类型</p>
   <p :class="{ prices: price > 100 }" >{{ price }}</p>
   <!--动态style-->
       <hr style="height: 5px;">
    <p :style="{ backgroundColor: bgcolor, fontSize: bgsize }">动态style的样式</p>

</template>

<script setup>

import { ref } from 'vue'
const price=ref(90)
const bool = ref(true)
const classObj = ref(
    {
        str_red: true,
        back_bg: true
    }
)
const bgcolor = ref('red')
const bgsize= ref('20px')

</script>

<style scoped>

.str_red{
    color: red;
}
.prices{
    color: hotpink;
}
.back_bg{
    background-color: aqua;
}

</style>